<template>
    <view class="toClassify">
        <Navigation title="商城" background="#FABB3C" titleColor="#fff" />
        <view class="top-box ph-24 pv-14 f ai-c jc-s-b">
            <view class="f f1">
                <view class="search w-f" @click="searchTap">
                    <u-search
                        placeholder="快速查找戳我"
                        v-model="queryParams.keyword"
                        height="30"
                        bgColor="#FFFFFF"
                        searchIconColor="#999"
                        placeholderColor="#999"
                        clearabled
                        :showAction="false"
                    >
                    </u-search>
                    <view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle" @click.stop="handelSearch"></u-button></view>
                </view>
            </view>
            <view class="w-40 h-40 ml-24 cart" @click="toCart">
                <image src="http://cwht.ricecs.cn/app/shop/cart.png" class="w-40 h-40"></image>
                <view class=" h-30 b-30 f ai-c jc-c" style="color:#fff;font-size: 24rpx;min-width: 30rpx;" v-if="cartCount>0">{{cartCount>99?'99+':cartCount}}</view>
            </view>
        </view>

        <view class="f list">
            <scroll-view scroll-y="true" :style="{ height: height + 'px' }" class="box w-150">
                <view class="w-150">
                    <view
                        v-for="(item, index) in classify"
                        :key="index"
                        class="w-150 h-96 f ai-c jc-c fs-24 text-color4"
                        :class="typeCurt == index ? 'active' : ''"
                        @click="changeClassify(index)"
                    >
                        {{ item.name }}
                    </view>
                </view>
            </scroll-view>
            <view class="f f1 fd-c">
                <view class="f ai-c h-80">
                    <view class="w-420">
                        <u-tabs
                            :list="twoClassify"
                            lineColor="#FABB3C"
                            :activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
                            :inactiveStyle="{ fontSize: '28rpx', color: '#999999' }"
                            @click="changeTwoClassify"
                            :current="twoCurt"
                        >
                        </u-tabs>
                    </view>
                    <view class="f f1 ai-c jc-c" @click="show = !show">
                        <image src="http://cwht.ricecs.cn/app/shop/sort.png" class="w-24 h-24"></image>
                        <view class="fs-24 mr-8" :class="show ? 'text-color' : 'text-color4'">{{ sortList[sortType].name }}</view>
                    </view>
                </view>
                <scroll-view scroll-y="true" :style="{ height: height - 40 + 'px' }" @scrolltolower="scrolltolower">
                    <view class="f jc-s-b mt-20 ph-16">
                        <view class="mr-16">
                            <view v-for="(item, index) in listL" :key="index" class="w-276 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
                                <image :src="item.picUrl" class="w-260 b-24" mode="widthFix"></image>
                                <view class="ph-12">
                                    <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
                                    <view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }} 到手价</view>
                                    <view class="fs-22 text-color3 old-price">¥{{ item.originalPrice }}</view>
                                    <!-- <view class="mt-17"><view class="fs-22 ph-8 pv-1 top">猫猫主粮TOP1</view></view> -->
                                </view>
                            </view>
                        </view>
                        <view>
                            <view v-for="(item, index) in listR" :key="index" class="w-276 b-24 ph-8 pt-8 pb-20 goods mb-16" @click="toDetail(item)">
                                <image :src="item.picUrl" class="w-260 b-24" mode="widthFix"></image>
                                <view class="ph-12">
                                    <view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
                                    <view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }} 到手价</view>
                                    <view class="fs-22 text-color3 old-price">¥{{ item.originalPrice }}</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 遮罩 -->
                    <view class="shade" v-show="show">
                        <view class="w-200 types b-12 ph-20" :style="{ top: statusBarHeight + 150 + 'px' }">
                            <view class="up"></view>
                            <view
                                class="h-100 w-f f ai-c jc-c fs-32 text-color4 border"
                                :class="sortType == index ? 'sort-active' : ''"
                                v-for="(item, index) in sortList"
                                :key="index"
                                @click="changeSort(index, item)"
                            >
                                {{ item.name }}
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { categoryFirstList, categorySecondList, spuPage } from '@/services/api/shop/index';
import { cartGetCount } from '@/services/api/shop/cart';

const classify = ref<any[]>([]);
const typeCurt = ref(0);
const twoClassify = ref<any[]>([]);
const twoCurt = ref(0);
const show = ref<boolean>(false);
const sortList = [
    { name: '智能排序', sortField: 'intelligent', sortAsc: true },
    { name: '销量升序', sortField: 'salesCount', sortAsc: true },
    { name: '销量降序', sortField: 'salesCount', sortAsc: false },
    { name: '价格升序', sortField: 'price', sortAsc: true },
    { name: '价格降序', sortField: 'price', sortAsc: false },
    { name: '好评升序', sortField: 'favorable', sortAsc: false },
    { name: '好评降序', sortField: 'favorable', sortAsc: true },
];
const sortType = ref(0);
const parentId = ref(null);
const id = ref(null);
const queryParams = ref({
    type: 0,
    sortAsc: true,
    pageNo: 1,
    pageSize: 10,
    firstCategoryId: null,
    secondCategoryId: null,
    keyword: '',
    // sortField: 'intelligent',
});
const listL = ref<any>([]);
const listR = ref<any>([]);
const cartCount = ref(0);
const relatedPetType=ref(0)

onLoad((options: any) => {
    listL.value = [];
    listR.value = [];
	relatedPetType.value=options.type
    parentId.value = options.parentId;
    id.value = options.id;
    getCategoryFirstList();
});
onShow(() => {
    getCartCount();
});
watch(
    () => [show?.value],
    () => {
        if (show?.value) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
    }
);

function toCart() {
    uni.navigateTo({
        url: '/pages_shop/shopCart/index',
    });
}
//获取购物车数量
async function getCartCount() {
    const { data } = await cartGetCount({});
    cartCount.value = data;
}
//搜索
function handelSearch() {
	queryParams.value.pageNo=1
    listL.value = [];
    listR.value = [];
    getSpuPage();
}
//上拉加载
function scrolltolower() {
    queryParams.value.pageNo++;
    getSpuPage();
}
//获取商品
async function getSpuPage() {
    const { data } = await spuPage(queryParams.value);
    if (data.list.length > 0) {
        data.list.forEach((item: any, index: number) => {
          //修改商品图片显示
          let list=item.picUrl.split(',')
          item.picUrl=list[0]
            if (index % 2 === 0) {
                listL.value.push(item);
            } else {
                listR.value.push(item);
            }
        });
    }
}
//获取一级分类
async function getCategoryFirstList() {
    const { data } = await categoryFirstList({ type: 0, topCategoryIds: [parentId.value], spuType: 0,relatedPetType:relatedPetType.value });
    classify.value = data;
    typeCurt.value = classify.value.findIndex((item) => {
        return item.id == id.value;
    });

    getCategorySecondList();
}

//获取二级分类
async function getCategorySecondList() {
    queryParams.value.firstCategoryId = classify.value[typeCurt.value].id;
    const { data } = await categorySecondList({ type: 0, parentId: queryParams.value.firstCategoryId, spuType: 0,relatedPetType:relatedPetType.value });
    twoCurt.value = 0;
    twoClassify.value = data;
    queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
    listL.value = [];
    listR.value = [];
    getSpuPage();
}
//切换二级分类
function changeTwoClassify(data: any) {
    twoCurt.value = data.index;
		queryParams.value.pageNo=1
    queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
    listL.value = [];
    listR.value = [];
    getSpuPage();
}
//切换一级分类
function changeClassify(index: number) {
  listL.value = [];
  listR.value = [];
	queryParams.value.pageNo=1
    typeCurt.value = index;
    getCategorySecondList();
}
const changeSort = (index: number, data: any) => {
    sortType.value = index;
    show.value = false;
    queryParams.value.sortField = data.sortField;
    queryParams.value.sortAsc = data.sortAsc;
    listL.value = [];
    listR.value = [];
    getSpuPage();
};
const toDetail = (data: any) => {
    uni.navigateTo({
        url: `/pages_shop/productDetails/index?status=shop&id=${data.id}`,
    });
};
uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ffffff',
});
let systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
let pageHeight = systemInfo.windowHeight;
const height = pageHeight - statusBarHeight - 46 - 43;
console.log(height);
</script>
<style lang="scss" scoped>
.toClassify {
    .shade {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.12);
        left: 0;
        top: 0;

        .types {
            position: fixed;
            right: 16rpx;
            background: #fff;
            .up {
                width: 0;
                height: 0;
                border-top: 16rpx solid transparent;
                border-right: 16rpx solid transparent;
                border-left: 16rpx solid transparent;
                border-bottom: 16rpx solid #ffffff;
                position: absolute;
                top: -32rpx;
                left: 50%;
                margin-left: -8rpx;
            }
            .border {
                border-bottom: 1px solid #f8f8f8;
            }
            .sort-active {
                background: #f8f8f8;
            }
            view:nth-child(1) {
                border-radius: 12rpx 12rpx 0 0;
            }
            view:nth-child(2) {
                border-radius: 0 0 12rpx 12rpx;
            }
        }
    }
    .old-price {
        text-decoration: line-through;
    }
    .goods {
        background: #f5f5f5;
    }
    .list {
        .box {
            background: #f5f5f5;
            height: 100%;
        }
        .list-content {
            height: 100%;
        }
        .list-box {
            height: 100%;
            .text {
                border: 2rpx solid #f0f0f0;
            }
        }
        .active {
            background: #fff;
            color: #fabb3c;
            position: relative;
        }
        .active::after {
            position: absolute;
            background: #fabb3c;
            height: 40rpx;
            width: 6rpx;
            top: 50%;
            margin-top: -20rpx;
            left: 0;
            content: '';
        }
    }
    .top-box {
        background: #fabb3c;
    }
    .cart {
        position: relative;
        view {
            background: #f54040;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
    }
    .search {
    	position: relative;
    	background: #fff;
    	border-radius: 64rpx;
    	padding-right: 10rpx;
    	display: flex;
    	align-items: center;
    
    	::v-deep .u-button__text {
    		font-size: 22rpx !important;
    		font-weight: 400 !important;
    	}
    
    	::v-deep .u-button {
    		height: 48rpx !important;
    	}
    }
}
</style>
